<template>
    <div class="left_menu">
        <div style="height: 34px;"></div>
        <div class="avatar">
            <img src="../../assets/default.png" alt="">
        </div>
        <div class="name">{{ user.name }}</div>
        <button class="logOut" @click="logout">退出登录</button>
        <div class="menu">
            <div class="menu_li" :class="{ 'menu_li_active': item.path == defaultPath1 }" @click="goHandle(item)"
                v-for="item in list" :key="item.id">
                <Icon :iconName="'o' + item.icon" v-if="item.path == defaultPath1" />
                <Icon :iconName="item.icon" v-else />
                <p>{{ item.label }}</p>
            </div>
        </div>

    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import Icon from '@/components/Icon.vue';
import { ElMessageBox } from "element-plus";
import { mapState, mapActions } from 'vuex';

export default {
    name: "leftMenu",
    components: { Icon, ElMessageBox },
    data() {
        return {
            active: "",
            list: [],
            user: {},
            flagId: 1,
            flag: false,
        };
    },
    computed: {
        ...mapState(['navMenuList', 'defaultPath']), // 映射仓库中的状态到组件

        defaultPath1() { 
            return this.defaultPath
        }
    },
    mounted() {
        if (localStorage.getItem("active")) {
            this.active = localStorage.getItem("active")
        }
        this.user = JSON.parse(sessionStorage.getItem("user"))
 
        this.getTreeData();

    },
    watch: {
        // active(newValue) { 
        // }
    },
    methods: {
        ...mapActions(['uploadAdd']),
         
        getTreeData() {
            httpService("/javaApi/baseMenu/queryMyTree", { "systemCode": "6050" }, "get").then((data) => {
                this.list = data[0].children;
                if (this.list.length > 0) {
                    this.active = this.list[0].path
                    if (this.flag) {
                        this.goHandle(this.list[0])
                    } else {
                        const arr = this.list.filter(item => item.levelName = "库存盘点")
                        if (arr) {
                            this.goHandle(arr[0])
                        }
                    }
                }
            });
        },
        goHandle(data) { 
            this.$router.push({ path: data.path }) 
            this.uploadAdd(data)
        },
        logout() {
            ElMessageBox.confirm("确定要退出系统吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    sessionStorage.removeItem("token");
                    sessionStorage.removeItem("user");
                    sessionStorage.removeItem("vuex");

                    this.$router.replace("/login");
                })
                .catch(() => { });
        },
    },
}
</script>

<style scoped>
.left_menu {
    width: 250px !important;
    min-height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* overflow-y: auto;
    padding: 0 15px; */
}

/* .left_menu::-webkit-scrollbar {
    width: 0;
} */

.avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
}

.name {
    color: #000;
    font-size: 16px;
    margin-top: 20px;
}

.logOut {
    width: 100px;
    height: 32px;
    border-radius: 5px;
    background-color: #6F72FF;
    border: none;
    color: #fff;
    font-size: 14px;
    margin-top: 25px;
    outline: none;
}

.menu {
    margin: 10px 13px 0;
    /* width: 100%; */
    /* background-color: brown; */
}

.menu_li {
    display: flex;
    align-items: center;
    margin-top: 15px;
    width: 190px;
    height: 50px;
    /* width: 217px;
    height: 59px; */
    border-radius: 7px;
    font-size: 16px;
    color: #2B2B2B;
    cursor: pointer;
    transition: all 0.2s ease-in;
}

.menu_li_active {
    background-color: #6F72FF !important;
    color: #fff !important;
    transition: all 0.3s ease-in;
}

.menu_li img {
    width: 18px;
    height: 18px;
    /* width: 20px;
    height: 20px; */
    margin: 0 20px 0 40px;
}
</style>